const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")

module.exports = {
  //入口文件路径
  entry: path.resolve(__dirname, '../src/index.js'),

  //出口配置
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: './js/bundle.js'
  },

  //loader配置
  module: {
    rules: [{
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    },
    {
      test: /\.less$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    },
    {
      test: /\.(png|jpg|gif|svg)$/,
      //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 50 * 1024, // 小于50kb以下的图片会被打包成base64格式
        },
      },
      generator: {
        filename: 'images/[name][ext]'
      }
    },]
  },

  //优化的配置
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },

  //插件的配置
  plugins: [new MiniCssExtractPlugin({
    filename: "./css/main.css"
  }),
  new HtmlWebpackPlugin({ filename: "index.html", template: "./public/index.html" }),
  new ESLintPlugin({ fix: true }),
  new CopyWebpackPlugin({
    patterns: [{
      from: "./public",
      to: "public",
      //配置复制时忽略的文件
      globOptions: {
        ignore: ["**/index.html"]
      }
    }],
  }),],

  //模式
  mode: 'production'
}